<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="id" label="ID" width="180"/>
    <el-table-column prop="deviceId" label="设备ID" width="180"/>
    <el-table-column prop="userId" label="抓怕人ID"/>
    <el-table-column prop="userName" label="抓拍人名称"/>
    <el-table-column prop="time" label="抓拍时间"/>
    <el-table-column>
      <template #default="{row}">
        <el-image :zoom-rate="1.2"
                  :max-scale="3" :hide-on-click-modal="true"
                  :min-scale="0.2" style="width: 160px; height: 90px" :src="'/api/image/'+row.path" :initial-index="row.index" :preview-src-list="srcList"></el-image>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="{row}">
        <el-link style="margin-left: 5px" type="primary" size="small" @click="handleDel(row.id)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background style="margin-top: 5px" layout="total, sizes, prev, pager, next, jumper" v-model:current-page="current" v-model:page-size="pageSize" :total="total"/>
</template>

<script setup name="CaptureView" lang="ts">
import {onMounted, ref, watch} from "vue";
import PageQuery from "@/model/PageQuery";
import {ElMessage, ElMessageBox} from "element-plus";
import CaptureApi from "@/axios/CaptureApi";
import type Capture from "@/model/Capture";

const tableData = ref<Capture[]>([])
const total = ref<number>(0)
const current = ref<number>(1)
const pageSize = ref<number>(10)
const srcList = ref<string[]>([])
onMounted(() => {
  loadData()
})

function loadData() {
  const pageQuery = new PageQuery();
  pageQuery.current = current.value
  pageQuery.size = pageSize.value
  CaptureApi.page(pageQuery)
      .then((resp) => {
        total.value = resp.data?.total || 0
        tableData.value = resp.data?.records || []
        srcList.value = tableData.value.map(item => "/api/image/" + item.path) || []
      })
}

function handleDel(id: number) {
  ElMessageBox.confirm('确认是否删除?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    CaptureApi.remove(id)
        .then(() => {
          ElMessage.success("删除成功")
          loadData()
        })
  })
}

watch(current, () => {
  loadData()
})

watch(pageSize, () => {
  loadData()
});


</script>


<style>
.el-image-viewer__img {
  width: 50% !important;
  height: auto !important;
}


.ei-flow-form .el-card__body {
  z-index: initial !important;
}

.el-table .el-table__cell {
  z-index: initial !important;
}
</style>